<template>
	<div class="music-container">
		<div class="music-pic"><img src="../../assets/1@2x (2).png" ></div>
		<div class="music-list">
			<div class="music-wraper">
				<div class="music-top">
					<div><router-link to="/musSin"><img src="../../assets/icon-singer@2x.png" class="img1"><span>歌手</span></router-link></div>
					<div><router-link to="/vedio"><img src="../../assets/shipin.png" class="img2"><span>视频</span></router-link></div>
					<div><router-link to="/radio"><img src="../../assets/radio@2x.png" class="img3"><span>电台</span></router-link></div>
				</div>
				<div class="music-down">
					<div><router-link to="/sonLis"><img src="../../assets/gedan (2).png" class="img4"><span>歌单</span></router-link></div>
					<div><router-link to="/album"><img src="../../assets/album@2x.png" class="img5"><span>专辑</span></router-link></div>
					<div><router-link to="/boader"><img src="../../assets/paihangbang.png" class="img6"><span>排行榜</span></router-link></div>
				</div>
			</div>
		</div>
		<div class="musiclist-tj">
			<h2>歌单推荐</h2>
			<div class="music-detail">
				<div class="mr0"><img src="../../assets/2@2x.png"><p>淡雅青春</p></div>
				<div><img src="../../assets/3@2x.png"><p>飞吧！少年</p></div>
				<div><img src="../../assets/4@2x.png"><p>意大利新古典</p></div>
				<div class="mr0"><img src="../../assets/5@2x.png"><p>意大利新古典</p></div>
				<div><img src="../../assets/6@2x.png"><p>意大利新古典</p></div>
				<div><img src="../../assets/7@2x.png"><p>意大利新古典</p></div>
			</div>
		</div>
		<p class="blank"></p>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
import musicPlayer from '../../components/music_player'
	export default{
		name:"musicLibrary",
		data(){
			return{
				
			}
		},
		components:{
			musicPlayer
		}
	}
</script>

<style scoped lang="less">
.music-container{
	margin-top: 88 / 100rem;
	background-color: #dbd7df;
}
.music-pic img{
	width: 100%;
}
.music-list{
	width: 100%;
	overflow: hidden;
	background-color: #fff;
}
.music-list .music-wraper{
	margin-top: 30/100rem;
	margin-bottom: 36/100rem;
}
.music-list .music-wraper>div{
	width: 100%;
	display: flex;
}
.music-list .music-wraper .music-top{
	margin-bottom: 32/100rem;
}
.music-list .music-wraper>div>div{
	text-align: center;
	flex:1
}
.music-list .music-wraper>div>div img{
	margin-bottom: 27/100rem;
}
.music-list .music-wraper>div>div span{
	display: block;
	font-size: 30/100rem;
}
.music-list .img1{
	width: 53/100rem;
}
.music-list .img2{
	width: 60/100rem;
}
.music-list .img3{
	width: 60/100rem;
}
.music-list .img4{
	width: 52/100rem;
}
.music-list .img5{
	width: 60/100rem;
}
.music-list .img6{
	width: 44/100rem;
}
.musiclist-tj{
	background-color: #fff;
	width: 100%;
}
.musiclist-tj>h2{
	margin-top: 20/100rem;
	overflow: hidden;
	font-size: 30/100rem;
	padding-top:32/100rem;
	padding-left:20/100rem;
	padding-bottom: 24/100rem;
}
.music-detail{
	overflow: hidden;
}
.music-detail>div{
	float: left;
	width: 240/100rem;
	height: 282/100rem;
	margin-left: 15/100rem;
	margin-bottom: 27/100rem;
}
.music-detail>div p{
	margin-top: 12/100rem;
	margin-left: 20/100rem;
	font-size: 30/100
}
.music-detail .mr0{
	margin-left: 0;
}
.music-detail img{
	width: 100%;
}
.blank{
	width: 100%;
	height: 108/100rem;
}
</style>